<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div重叠</title>
    <style>
       div{
          width: 100px;
          height: 100px;
          /* border: 1px solid red  */
       }
       #div1{
           margin-bottom: 30px;
           background-color: forestgreen
       }
       #div2{
           margin-top: 60px;
           background-color: black
       }

       #div3{
           background-color: aqua;
           /* margin-top: 20px */
       }
      #div4{
           background-color:red;
           width: 60px;
           height: 60px;
           margin-top: 40px;
       }
    </style>
</head>
<body>
       
    <!-- 1.如果垂直方向两个外边距相遇，则取最大值那个div的外边距 -->

    <div id="div1">1</div>
    <div id="div2">2</div>
    <!-- 
        2.外边距溢出，子元素设置的上外边距作用于父元素
          解决办法：
               1.给父元素添加边框  ->增加了元素高度
               2.使用父元素的上内边距来取代子元素的上外边距 ->增加了元素高度
               3.在父元素的第一个子元素位置增加一个空(table)   
    
    -->
    <div id="div3">
           <table></table>
          <div id="div4">3</div>
    </div>
</body>
</html>